import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { Dropdown, Menu } from '@arco-design/web-react'
import { IconDown, IconLocation, IconRight } from '@arco-design/web-react/icon'
import '@arco-design/web-react/dist/css/arco.css'
import { useRouter } from 'next/navigation';
import {
  Bars3Icon,
  PencilSquareIcon,
} from '@heroicons/react/24/solid'
import AppIcon from '@/app/components/base/app-icon'
import ServiceClient  from '@/app/api/utils/serviceClient';
import TwoDifyClient from '@/app/api/utils/twoDifyClient'
import {
  message,Button
} from 'antd';
import {
  RightCircleOutlined,
  HddTwoTone
} from '@ant-design/icons';
import Pubsub from 'pubsub-js'
const sApi = new ServiceClient()
const tApi =new TwoDifyClient()
let menuItems:any = []
let knowledges:any=[]
const iconStyle = {
  marginRight: 8,
  fontSize: 16,
  transform: 'translateY(1px)',
}


export type IHeaderProps = {
  title: string
  isMobile?: boolean
  onShowSideBar?: () => void
  onChangeLLM: () =>  void
  knowledgeName:Record<string, any>
  onCreateNewChat?: () => void
}

const Header: FC<IHeaderProps> = ({
  title,
  isMobile,
  onShowSideBar,
  onChangeLLM,
  knowledgeName,
  onCreateNewChat,
  

}) => {

  const [selectValue, setSelectValue] = useState()
  const [isOpen, setIsOpen] = useState(false)
  useEffect(()=>{

    //指定一个消息订阅。当切换知识库的时候触发
    var i=0
    const tokenPus = Pubsub.subscribe('changellmVal',(_:any,data:Number)=>{
      if(i==0){
        handleSelect(data)
        i++
      }
    })
    // 获取LLM大模型列表
    sApi.getModels().then(res=>{
      if(res.data.code===200){
          menuItems=[]
          res.data.models.forEach(item=>{
            menuItems.push({ key: item.id, label: item.name })
          })
          
      }
      setSelectValue(menuItems[0].label)
    })
    return()=>{
      //组件卸载时候调用
      Pubsub.unsubscribe(tokenPus)
    }
  },[])
  const handleSelect = (key: Number) => {
    const selectedItem = menuItems.find(item => item.key === key)
    setSelectValue(selectedItem ? selectedItem.label : '')
    setIsOpen(false)
    onChangeLLM(key)
  }

  
  const dropList = (
    <Menu>
      {menuItems.map(item => (
        <Menu.Item
          key={item.key}
          onClick={() => handleSelect(item.key)}
        >
          <IconLocation style={iconStyle} />
          {item.label}
        </Menu.Item>
      ))}
    </Menu>
  )

  const router = useRouter();
  const openKnowledgePage=(e:any)=>{

    //打开知识库页面
    router.push("/home/knowledge")

  }
  return (
    <div className="shrink-0 flex items-center justify-between h-12 px-3 bg-gray-100">
      {isMobile
        ? (
          <div
            className='flex items-center justify-center h-8 w-8 cursor-pointer'
            onClick={() => onShowSideBar?.()}
          >
            <Bars3Icon className="h-4 w-4 text-gray-500" />
          </div>
        )
        : <div></div>}
      <div className='flex justify-between items-center w-screen'>
        <div className='flex '>
          
          <Dropdown
            droplist={dropList}
            trigger='click'
            position='bl'
            onVisibleChange={visible => setIsOpen(visible)}
          >
            <Button type='link'>
              {selectValue || '请选择'} {isOpen ? <IconDown /> : <IconRight />}
            </Button>
          </Dropdown>
        </div>
        {!isMobile &&   <div className='text-sm text-gray-600 flex items-center'>
          <HddTwoTone />
           <div className='mr-4 ml-1 text-gray-600'>{knowledgeName===null?"未设置":knowledgeName.knowledge_name}</div>
        </div>
        }
       {false && <Button type='link' onClick={openKnowledgePage}>
           知识库 <RightCircleOutlined className=' text-xl' />
        </Button>
       }

      </div>

      {isMobile
        ? (
          <div className='flex items-center justify-center h-8 w-8 cursor-pointer'
            onClick={() => onCreateNewChat?.()}
          >
            <PencilSquareIcon className="h-4 w-4 text-gray-500" />
          </div>)
        : <div></div>}
    </div>
  )
}

export default React.memo(Header)
